<!-- 地图 -->
<template>
  <div id="map" />
</template>

<script>
import { mapOption, converMaptData } from '@/utils/chartMap'
import { addEvent, removeEvent } from '@/utils/common'

export default {
  name: 'Map',
  props: {
    alarmData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      map: null
    }
  },
  watch: {
    alarmData(newData, oldData) {
      let seriesData = converMaptData(newData)
      this.refresh(seriesData)
      this.hideLoading()
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.init()
    })
    addEvent(window, 'resize', this.chartResize)
  },
  destroyed() {
    removeEvent(window, 'resize', this.chartResize)
  },
  methods: {
    init() {
      const mapContainer = document.getElementById('map')
      this.map = this.$echarts.init(mapContainer)
      let map = this.map
      mapOption.series[0].data = converMaptData(this.alarmData)
      map.setOption(mapOption)
      this.showLoading()
    },
    refresh(data) {
      let map = this.map
      let option = map.getOption()
      option.series[0].data = data
      map.setOption(option)
    },
    chartResize() {
      this.map && this.map.resize()
    },
    showLoading() {
      if (this.alarmData.length === 0) {
        this.map.showLoading({
          text: '数据正在加载...',
          textColor: '#fff',
          maskColor: 'rgba(30, 30, 30, 0.8)',
          zlevel: 10000
        })
      }
    },
    hideLoading() {
      this.map.hideLoading()
    }
  }
}
</script>

<style>
#map {
  height: 99%;
  width: 99%;
}
</style>
